@mixin border_1px($type, $color: #e6e6e6, $line: solid) {
  & {
    @if $type=='' {
      border: 1PX $line $color;
    }

    @else if $type=='left' {
      border-left: 1PX $line $color;
    }

    @else if $type=='bottom' {
      border-bottom: 1PX $line $color;
    }

    @else if $type=='right' {
      border-right: 1PX $line $color;
    }

    @else if $type=='top' {
      border-top: 1PX $line $color;
    }


    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2dppx) {

      @if $type=='' {
        border: .5PX $line $color;
      }

      @else if $type=='left' {
        border-left: .5PX $line $color;
      }

      @else if $type=='bottom' {
        border-bottom: .5PX $line $color;
      }

      @else if $type=='right' {
        border-right: .5PX $line $color;
      }

      @else if $type=='top' {
        border-top: .5PX $line $color;
      }


    }

    @media (-webkit-min-device-pixel-ratio: 3),
    (min-resolution: 3dppx) {

      @if $type=='' {
        border: .333PX $line $color;
      }

      @else if $type=='left' {
        border-left: .333PX $line $color;
      }

      @else if $type=='bottom' {
        border-bottom: .333PX $line $color;
      }

      @else if $type=='right' {
        border-right: .333PX $line $color;
      }

      @else if $type=='top' {
        border-top: .333PX $line $color;
      }


    }

  }

}

.border {
  @include border_1px('')
}

.border-top {
  @include border_1px('top')
}

.border-left {
  @include border_1px('left')
}

.border-right {
  @include border_1px('right')
}

.border-bottom {
  @include border_1px('bottom')
}


/**
 * @description: top、bottom  0.5px 边框进行处理 
 * @return: 
 */

//  .border-bottom,
//  .border-top,
//  .border-left,
//  .border-all,
//  .border-right {
//      position: relative;
//      border: none !important;
//  }
 
//  .border-bottom::after {
//     content: '';
//     z-index: 1;
//     position: absolute;
//     bottom: 0;
//     left: 0;
//     background-color: #e6e6e6;
//     display: block;
//     width: 100%; 
//     height: 1px; 
//     transform: scale(1, 1);
//  }
 
//   .border-top::after {
//     content: '';
//     z-index: 1;
//     position: absolute;
//     top: 0;
//     left: 0;
//     background-color: #e6e6e6;
//     display: block;
//     width: 100%; 
//     height: 1px; 
//     transform: scale(1, 1);
//  }

//  .border-left::after {
//   content: '';
//   z-index: 1;
//   position: absolute;
//   left: 0;
//   top: 0;
//   background-color: #e6e6e6;
//   display: block;
//   height: 100%; 
//   width: 1px; 
//   transform: scale(1, 1);
// }
 
//  .border-right::after {
//     content: '';
//     z-index: 1;
//     position: absolute;
//     right: 0;
//     top: 0;
//     background-color: #e6e6e6;
//     display: block;
//     height: 100%; 
//     width: 1px; 
//     transform: scale(1, 1);
//  }



//   .border-all:after{
//     content:" ";
//     position:absolute;
//     top: 0;
//     left: 0;
//     width: 200%;
//     height: 200%;
//     transform: scale(0.5);
//     transform-origin: left top;
//     box-sizing: border-box;
//     border: 1px solid #E5E5E5;
//   }
 
//  @media (-webkit-min-device-pixel-ratio: 2),
//  (min-resolution: 2dppx) {
//     .border-bottom::after,
//     .border-top::after {
//       width: 200%;
//       transform: scale(1, 0.5);
//     }
//     .border-left::after, .border-right::after {
//       height: 200%;
//       transform: scale(0.5, 1);
//     }
   
   
//  }
 
//  @media (-webkit-min-device-pixel-ratio: 3),
//  (min-resolution: 3dppx) {
//   .border-bottom::after,
//   .border-top::after {
//     width: 300%;
//     transform: scale(1, 0.33);
//   }
//   .border-left::after, .border-right::after {
//     height: 300%;
//     transform: scale(0.33, 1);
//   }
 
//  }


/*省略号*/

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


/* 在这里做iPhone X的判断 */

@media screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio: 3) {
  .border-iphone {
    /* bottom: 40px; */
    border-bottom: 40px solid #fff;
  }
}

/* 1792x828px at 326ppi  iPhone XR*/

@media only screen 
  and (device-width : 414px) 
  and (device-height : 896px) 
  and (-webkit-device-pixel-ratio : 2) {
  .border-iphone {
    /* bottom: 34px; */
    border-bottom: 34px solid #fff;
  }

 
}

/* 2436x1125px at 458ppi  iPhone XS*/

@media only screen 
  and (device-width : 375px) 
  and (device-height : 812px) 
  and (-webkit-device-pixel-ratio : 3) {
  .border-iphone {
    /* bottom: 34px; */
    border-bottom: 34px solid #fff;
  }

 
}

/* 2688x1242px at 458ppi iPhone XS Max*/

@media only screen 
  and (device-width : 414px) 
  and (device-height : 896px) 
  and (-webkit-device-pixel-ratio : 3) {
   .border-iphone {
    /* bottom: 34px; */
    border-bottom: 34px solid #fff;
  }

}

/*距离值*/

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}

.pt-4 {
  padding-top: 4px;
}
.pt-6 {
  padding-top: 6px;
}
.pt-8 {
  padding-top: 8px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-12 {
  padding-top: 12px;
}
.pt-14 {
  padding-top: 14px;
}
.pt-16 {
  padding-top: 16px;
}
.pt-18 {
  padding-top: 18px;
}
.pt-20 {
  padding-top: 20px;
}
.pt-22 {
  padding-top: 22px;
}
.pt-24 {
  padding-top: 24px;
}
.pt-26 {
  padding-top: 26px;
}
.pt-28 {
  padding-top: 28px;
}
.pt-30 {
  padding-top: 30px;
}


.pl-16 {
  padding-left: 16px;
}
.pl-20 {
  padding-left: 20px;
}
.pl-30 {
  padding-left: 30px;
}



.f-bold {
  font-weight: bold;
}
.f-10 {
  font-size: 10px;
}
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}

.f-16 {
  font-size: 16px;
}

.ft-18 {
  font-size: 18px;
}

.f-20 {
  font-size: 20px;
}

.f-22 {
  font-size: 22px;
}

.f-24 {
  font-size: 24px;
}
.f-26 {
  font-size: 26px;
}
.f-28 {
  font-size: 28px;
}
.f-30 {
  font-size: 30px;
}
.f-32 {
  font-size: 32px;
}
.f-34 {
  font-size: 34px;
}
.f-36 {
  font-size: 36px;
}
.f-38 {
  font-size: 38px;
}
.f-40 {
  font-size: 40px;
}

.f-bold {
  font-weight: bold;

}

.tx-center {
  text-align: center;
}
.tx-right {
  text-align: right;
}
.tx-left {
  text-align: left;
}

.color-gray {
  color: #999999;
}



.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


::-webkit-scrollbar{display: none;}
::-webkit-scrollbar-track{display: none;}
::-webkit-scrollbar-thumb{display: none;}


.text-line-two {
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;

}




